<template>
    <h2>门店信息--添加</h2>
    <table border="1">
        <tr>
            <td>门店名称</td>
            <td>
                <input type="text" v-model="info.sName"/>
            </td>
        </tr>
         <tr>
            <td>分店名称</td>
            <td>
                <input type="text" v-model="info.fName"/>
            </td>
        </tr>
         <tr>
            <td>商户地址</td>
            <td>
                <select v-model="info.address">
                    <option value="北京昌平区">北京昌平区</option>
                    <option value="北京顺义区">北京顺义区</option>
                    <option value="北京房山">北京房山</option>
                </select>
            </td>
        </tr>
         <tr>
            <td>门店照片</td>
            <td>
                <img style="width:70px;height:80px;" :src="info.imgUrl" />
                <input type="file" @change="SCTP"/>
            </td>
        </tr>
        <tr>
            <td>门店状态</td>
            <td>
                <input type="radio" :value="true" v-model="info.state"/>启用
                <input type="radio" :value="false" v-model="info.state"/>停用
            </td>
        </tr>
         <tr>
            <td>客服电话</td>
            <td>
                <input type="text" v-model="info.phone"/>
            </td>
        </tr>
         <tr>
            <td>开业时间</td>
            <td>
                <input type="date" v-model="info.time"/>
            </td>
        </tr>
         <tr>
            <td>门店介绍</td>
            <td>
                <textarea v-model="info.shopInfo"></textarea>
            </td>
        </tr>
        <tr>
            <td>入店须知</td>
            <td>
                <textarea v-model="info.shopXZ"></textarea>
            </td>
        </tr>
         <tr>
            <td>交通信息</td>
            <td>
                <textarea v-model="info.traffic"></textarea>
            </td>
        </tr>
         <tr>
            <td>
                <input type="button" value="添加" @click="Add"/>
            </td>
        </tr>
    </table>
</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';

    const info=ref({
        sName: "",
        fName: "",
        address: "",
        imgUrl: "",
        phone: "",
        state: true,
        shopInfo: "",
        time: "",
        shopXZ: "",
        traffic: ""
    });

    const Add=()=>{
        if(info.value.sName==""){
            alert('门店名称不能为空');
            return;
        }
        if(info.value.address==""){
            alert('商户地址不能为空');
            return;
        }
        if(info.value.imgUrl==""){
            alert('照片不能为空');
            return;
        }
        if(info.value.phone==""){
            alert('电话不能为空');
            return;
        }
        if(info.value.traffic==""){
            alert('交通方式不能为空');
            return;
        }
        axios.post("https://localhost:7168/api/Shop/AddShop/AddShop",info.value)
        .then(res=>{
            if(res.data>0){
                alert('添加成功');
            }
            else{
                alert('添加失败');
            }
        })
    }

    const SCTP=(e:any)=>{
        var file=e.target.files[0];
        var fd=new FormData();
        fd.append("files",file)
        axios.post("https://localhost:7168/api/Files/FileUpload/FileUpload",fd)
        .then(res=>{
            info.value.imgUrl=res.data;
            console.log(res.data);
        })
        .catch(err=>{
            alert(err);
        })
    }

</script>
